<template>
	<view class="content page-bg">
		<!--  #ifdef  MP-WEIXIN -->
		<div class="title" :style="{'paddingTop': statusBarHeight + 'px','height':menuBarHeight + 'px'}">
			<image src="../../static/home.svg" class="logo" mode="" @click="jumpHome"></image>
			<text class="brand" @click="jumpHome">回到主页</text>
		</div>
		<!-- #endif -->
		<div class="user-avatar-box">
			<button class="user-avatar-btn">
				<image :src="shareRoom.avatar" class="user-avatar" mode="scaleToFill"></image>
			</button>

		</div>
		<div class="user-name-box">

			<text class="user-name-input">{{shareRoom.roomName}}</text>
		</div>
		<button class="btn-primary" @click="joinRoomClick">观看房间</button>
		<div class="app-info">
			<image src="../../static/logo.svg" class="app-logo" mode=""></image>
			<text class="app-tips">本程序仅供娱乐，请勿用于非法活动</text>
			<text class="app-tips">远离赌博，快乐生活</text>
		</div>
	</view>
</template>

<script>
	import {
		joinObserverRoom
	} from '../../api/room'
	const app = getApp();
	export default {
		data() {
			return {
				menuBarHeight: app.globalData.menuBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				routeCode: undefined,
				shareRoom: undefined
			}
		},
		onLoad(query) {
			this.routeCode = query.scene
			if (this.routeCode === 'share') {
				this.shareRoom = uni.getStorageSync("share")
			}
			console.log('this.shareRoom', this.shareRoom)
		},
		methods: {
			jumpHome() {
				uni.redirectTo({
					url: "/pages/index/index?scene=normal"
				})
			},
			joinRoomClick() {
				var that = this
				uni.getPushClientId({
					success: (res) => {
						console.log('getPushClientId', res.cid);
						joinObserverRoom({
							cid: res.cid,
							code: that.shareRoom.observerCode,
							source: "mp"
						}).then(result => {
							uni.setStorageSync("o_room", result.data)
							uni.navigateTo({
								url: "/pages/observerRoom/observerRoom"
							})
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content::before {
		content: "";
		clear: both;
		display: table;
	}

	.content {
		// background: linear-gradient(180deg, $uni-color-primary, #f2f7ff10);
		position: relative;
		height: 100vh;
		width: 100vw;

		.title {
			width: 100%;
			display: flex;
			align-items: center;

			.logo {
				width: 60upx;
				margin-left: 40upx;
			}

			.brand {
				font-size: 40upx;
				color: black;
				margin-left: 20upx;
				font-weight: bolder;
			}
		}


		.user-avatar-box {
			height: auto;
			margin: 20% auto 0;
			width: 100%;
			display: flex;
			justify-content: center;

			.user-avatar-btn {
				border: none;
				background-color: transparent;
				display: block;
				position: relative;
				padding-top: 10upx;
				padding-bottom: 10upx;
			}

			button::after {
				border: none;
			}

			.user-avatar-btn ::after {
				border: 0px solid transparent !important;
			}

			.user-avatar {
				background-color: #fff;
				border-radius: 100%;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
				height: 200upx;
				overflow: hidden;

				width: 200upx;
				border: 8upx solid #fff;
				position: relative;

			}

			.camera-icon {
				width: 50upx;
				height: 50upx;
				position: absolute;
				bottom: 40upx;
				right: 40upx;
				border-radius: 25upx;
				border: 4upx solid #fff;
				background-color: #fff;
			}
		}

		.user-name-box {
			height: 100upx;

			margin: 0 64upx;
			margin-top: 64upx;
			display: flex;
			justify-content: center;
			align-items: center;

			.user-name-input {

				border-radius: 12upx;
				// box-shadow: 0 5upx 10upx 0 rgba(0, 0, 0, .05);
				font-size: 40upx;
				font-weight: 600;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
			}
		}

		.btn-primary {
			border-radius: 16upx !important;
			font-size: 36upx !important;
			// height: 100upx !important;
			line-height: 100upx !important;
			margin: 0 40upx;
			background-color: $uni-color-primary;
			color: white;
			font-weight: 200;
			margin-top: 200upx;
		}

		.app-info {
			bottom: 64upx;
			position: absolute;
			text-align: center;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.app-logo {
				height: 60upx;
				margin-bottom: 20upx;
			}

			.app-tips {
				color: #00000050;
				font-size: 24upx;

			}
		}
	}
</style>